<script setup lang="ts">
import { computed } from 'vue';
import { createReusableTemplate } from '@vueuse/core';
import { $t } from '@/locales';

defineOptions({
  name: 'CardData'
});

interface CardData {
  key: string;
  title: string;
  value: string;
  unit: string;
  color: {
    start: string;
    end: string;
  };
  icon: string;
}

const cardData = computed<CardData[]>(() => [
  {
    key: 'visitCount',
    title: $t('page.home.visitCount'),
    value: '可视化、免费地体验通义大模型',
    unit: '',
    color: {
      start: '#00000000', // #00000000
      end: '#00000000'
    },
    icon: 'material-symbols:deployed-code-account-rounded'
  },
  {
    key: 'turnover',
    title: $t('page.home.turnover'),
    value: '通过多种方法进行模型微调训练',
    unit: '',
    color: {
      start: '#00000000',
      end: '#00000000'
    },
    icon: 'material-symbols:interactive-space-sharp'
  },
  {
    key: 'downloadCount',
    title: $t('page.home.downloadCount'),
    value: '为所有模型提供统一的管理视图',
    unit: '',
    color: {
      start: '#00000000',
      end: '#00000000'
    },
    icon: 'material-symbols:coronavirus'
  },
  {
    key: 'dealCount',
    title: $t('page.home.dealCount'),
    value: '支持将模型转换为适合业务场景的推理形式',
    unit: '',
    color: {
      start: '#00000000',
      end: '#00000000'
    },
    icon: 'material-symbols:deployed-code'
  }
]);

interface GradientBgProps {
  gradientColor: string;
}

const [DefineGradientBg, GradientBg] = createReusableTemplate<GradientBgProps>();

function getGradientColor(color: CardData['color']) {
  return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
  // return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
}
</script>

<template>
  <NCard :bordered="false" size="small" class="card-wrapper">
    <!-- define component start: GradientBg -->
    <DefineGradientBg v-slot="{ $slots, gradientColor }">
      <div class="rd-8px px-16px pb-4px pt-8px text-white" :style="{ backgroundImage: gradientColor }">
        <component :is="$slots.default" />
      </div>
    </DefineGradientBg>
    <!-- define component end: GradientBg -->

    <NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
      <NGi v-for="item in cardData" :key="item.key">
        <GradientBg :gradient-color="getGradientColor(item.color)" class="pt-12px text-center">
          <div style="display: flex; justify-content: center; align-items: center">
            <SvgIcon :icon="item.icon" class="text-80px text-blue" />
          </div>
          <h3 class="text-16px text-black">{{ item.title }}</h3>
          <div class="text-grey mt-15px text-12px text-black">{{ item.value }}</div>
        </GradientBg>
      </NGi>
    </NGrid>
  </NCard>
</template>

<style scoped></style>
